<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		
		<title>Metadata creation</title>
		<style type="text/css" title="currentStyle">
			@import "demos.css";
		</style>
		<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
		<script type="text/javascript" language="javascript" src="http://chrisiufer.com/tagger/jquery.tagger.js"></script>
		<script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>
	
		<!------------------------------------ Validation Plugin --------------------------------------------->
    	<script language="javascript" type="text/javascript" src="jquery.validate.min.js"></script>
    	<script language="javascript" type="text/javascript" src="messages_ja.js"></script>	
	
		<script type="text/javascript" charset="utf-8">
			var oTable;
			var giRedraw = false;
			var giCount = 0;
			
			$(document).ready(function() {
				/* Add a click handler to the rows - this could be used as a callback */
				$("#example tbody").click(function(event) {
					$(oTable.fnSettings().aoData).each(function (){
						$(this.nTr).removeClass('row_selected');
					});
					$(event.target.parentNode).addClass('row_selected');
				});
				
				/* Add a click handler for the delete row */
				$('#delete').click( function() {
					var anSelected = fnGetSelected( oTable );
					var iRow = oTable.fnGetPosition( anSelected[0] );
					oTable.fnDeleteRow( iRow );
				} );
				
				/* Init the table */
				oTable = $('#example').dataTable( {
					"bLengthChange": false,
					"bSort": false,
					"iDisplayLength": 100,
					"bPaginate": false,
					"bFilter": false
				} );


				// Set orgid and password at Cookie
				$('form#order').submit(function(ev) {
					var options = { path: '/', expires: 10 };
					$.cookie('ORGID', $('#ORGID').val(), options);
					$.cookie('PASS', $('#PASS').val(), options);			
				});
				
				$('#ORGID').val($.cookie('ORGID'));
				$('#PASS').val($.cookie('PASS'));	
				
						
			} );


  			$(document).ready(function(){
    			$("#order").validate();
  			});	
			

			/* Get the rows which are currently selected */
			function fnGetSelected( oTableLocal ) {
				var aReturn = new Array();
				var aTrs = oTableLocal.fnGetNodes();
				
				for ( var i=0 ; i<aTrs.length ; i++ )
				{
					if ( $(aTrs[i]).hasClass('row_selected') )
					{
						aReturn.push( aTrs[i] );
					}
				}
				return aReturn;
			}
			
			function fnClearData() {
				oTable.fnClearTable( 0 );
				giCount = 0;
			}

			function fnClickAddRow() {
				oTable.fnAddData( [
						getFieldTypes(giCount),
						"<input type=\"text\" name=\"PARAM_LABEL"+giCount+"\">" ,
						"<input type=\"text\" name=\"PARAM_FULLNAME"+giCount+"\" value=\"cfield" + giCount + "\">" ,
						"<input type=\"text\" name=\"PARAM_ATTRS"+giCount+"\" id=\"PARAM_ATTRS"+giCount+"\">",
						"<a href=\"javascript:void(0);\" name=\""+giCount+"\" onclick=\"openwindow(this);\"><div id=\"LINK" + giCount + "\"></div></a>"
						  ] );
				giCount++;
			}

	
			function getFieldTypes(giCount) {
				var types = new Array("Url", "Text", "Picklist", "TextArea", "Phone", "Percent","Number",
				"MultiselectPicklist", "MasterDetail", "Lookup", "LongTextArea", "Email", "Date", "DateTime",
				"Currency", "Checkbox", "AutoNumber");
				
				var labels = new Array("URL", "テキスト", "選択リスト", "テキストエリア", "電話", "パーセント","数値",
				"選択リスト（複数選択）", "主従関係", "参照関係", "ロングテキストエリア", "電子メール", "日付", "日付/時間",
				"通貨", "チェックボックス", "自動採番");								
				
				var buf = "<select onChange=\"redrawSelect(this)\" id=\"TYPE" + giCount + "\" name=\"PARAM_TYPE" + giCount + "\">";
				for(i = 0; i < types.length; i++) {
					buf = buf + "<option value=\"" + types[i] + "\">" + labels[i] + "</option>";
				}
				return buf;
			}				
    		
    		var selectedRowNum;
    		function openwindow(obj) {
	   			selectedRowNum = obj.name;
    			var id = "TYPE" + selectedRowNum;
    			var prefix = document.getElementById(id).value;
    			var page = prefix + '.html';
    			window.open(page, 'mywindow4', 'width=800, height=600, menubar=no, toolbar=no, scrollbars=yes');
    		}
    		
    		function callByChild() {
				var name = "PARAM_ATTRS" + selectedRowNum;
				document.getElementById(name).value =  document.getElementById("temp").value;
			}
			
			function redrawSelect(obj){
				// No additional attributes for those Field Types
				var un = new Array("Url", "TextArea",  "Phone", "Email", "Date", "DateTime");
			
				var tmp = obj.name;
				var rowid = tmp.substring("PARAM_TYPE".length, tmp.length);
				
			    var index = obj.selectedIndex;
    			if (index != 0){
        			var val = obj.options[index].value;
        			
        			var showLink = true;
	        		for(i = 0; i < un.length; i++) {
	        			if(un[i] == val) {
	        				showLink = false;
	        			}	
	        		}

	        		var id = "LINK" + rowid;

	        		if(showLink) {
	        			document.getElementById(id).innerHTML = "設定";
	        		} else {
	        			document.getElementById(id).innerHTML = "";
	        		}
    			}
			}
  		
    </script>
		
	</head>


	<body id="dt_example">
		<input type="hidden" id="temp" />
		 <div id="container"> 
			<form method ="post" id="order" action="../main">
		 	<table width="100%">
		 		<tr>
		 			カスタム項目を既存オブジェクトに追加&nbsp;&nbsp;<input type="checkbox" name="PARAM_EXISTOBJ" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 		 		
		 			オブジェクト名&nbsp;&nbsp;<input type="text" name="PARAM_OBJNAME" class="required"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		 			表示ラベル&nbsp;&nbsp;<input type="text" name="PARAM_OBJLABEL" class="required"/>
		 		</tr>
		 		<tr>
		 			<td>
						<a href="javascript:void(0);" onclick="fnClickAddRow();">項目追加</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a href="javascript:void(0)" id="delete">項目削除</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;			
						<a href="javascript:void(0);" onclick="fnClearData();">すべてクリア</a>
					</td>
				</tr>	
			<div id="demo">
				<tr>
					<td>
						<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
							<thead>
								<tr>
									<th>データ型</th>
									<th>表示ラベル</th>
									<th>項目名</th>
									<th>詳細設定</th>
									<th></th>
								</tr>
							</thead>
							<tbody>
							</tbody>
							<tfoot>
								<tr>
									<th>データ型</th>
									<th>表示ラベル</th>
									<th>項目名</th>
									<th>詳細設定</th>
									<th></th>
								</tr>
							</tfoot>	
						</table>
					</td>
				</tr>
				<tr>					
					<td><br>
						ユーザID&nbsp;&nbsp;<input type="text" id="ORGID" name="PARAM_ORGID"  class="required"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		 				パスワード&nbsp;&nbsp;<input type="text" id="PASS" name="PARAM_PASSWD"  class="required"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
						<input type="submit" >
					</td>
				</tr>
			</table>
			</form>
			</div>
			<div class="spacer"></div>
		</div> 
		
	</body>
</html>